<template>
    <div class="home-container">
        <div class="cartoon">
            <div class="img-container">
                <img :src="currentImg" alt="">
            </div>
        </div>
        <el-calendar v-model="value" />
    </div>
</template>

<script>
export default {
    name:"home",
    data(){
        return {
            value:new Date(),
            imgList:[
                "src/assets/4.jpg","src/assets/1.jpg","src/assets/3.jpg",
                "src/assets/1.jpg","src/assets/5.jpg"
            ],
            currentImg:"",
            prevIndex:0,
            t:null
        }
    },
    // 渲染页面时，每15秒执行一次切换图片
    mounted(){
        // 初始图片
        this.currentImg = this.imgList[this.prevIndex];
        this.t = setInterval(() => {
            this.changeImg();
        },15000)
    },
    // 离开此页面时，将每隔15秒自动切换图片取消
    beforeUnmount(){
        clearInterval(this.t);
    },
    methods:{
        // 切换图片（每次图片都不同）
        changeImg(){
            let i = Math.floor(Math.random() * this.imgList.length);
            while(i === this.prevIndex){
                i = Math.floor(Math.random() * this.imgList.length);
            };
            this.currentImg = this.imgList[i];
            [this.prevIndex,i] = [i, 0];
        }
    }
}
</script>
<style>
/* 整个首页样式 */
.home-container{
    margin:16px 20px;
    padding:20px;
    display:grid;
    grid-template-columns: 1fr 1fr;
}
/* 动画样式 */
.cartoon{
    margin-top:20px;
    margin-left:18px;
    width:450px;
    height:450px;
    /* border:1px solid red; */
    position:relative;
    border-radius:50%;
    overflow: hidden;
}
.img-container{
    height: 100%;
    width: 100%; 
}
.img-container img{
    height: 100%;
    width: 100%;
    /* 使用动画 */
    animation:showImg 15s linear infinite;  
}
/* 创建动画 */
@keyframes showImg{
    0%{
        /* 此阶段图片准备慢慢放大 */
        transform:scale(0.05);
        border-radius: 50%;
        
    }
    25%{
        /* 此阶段图片已放大到正常大小，准备旋转 */
        transform:scale(1);
        border-radius: 50%;
        transform:rotate(0deg);
    }
    70%{
        /* 此阶段图片已旋转360度 */
        transform:rotate(360deg);
    }
    80%{
        /* 此阶段图片仍保留在旋转360度的状态，即停顿一会 */
        transform:rotate(360deg);
    }
    100%{
        /* 此阶段图片已缩小到近乎消失 */
        transform:scale(0.05);
        border-radius: 50%;
    }
}
/* 日历样式 */
.el-calendar__button-group{
    display:none;
}
.el-calendar__header {
    font-size: 20px;
}
.el-calendar-table__row{
    --el-calendar-cell-width: 55px;
    
}
.el-calendar-day{
    margin-top:10px;
}
.el-calendar{
    transform:scale(0.9);
    margin-top:-18px;
}
</style>